<template>
    <div class="page-bar">
        <ul>
            <li class="item" :class="setButtonClass(0)"   @click.stop="prevPage">上一页</li>
            <li v-for="(page,index) in pagesList" :class="setPageClass(page)"  @click.stop="pageClick(page)">
                    {{page<1?'...':page}}
            </li>
            <li class="item" :class="setButtonClass(1)"  @click.stop="nextPage">下一页</li>
        </ul>
    </div>
</template>

<script>
export default {
  props: {
    cur: { type: Number, default: 5 },
    allNumber: { type: Number, default: 200 },
    pageSize: { type: Number, default: 10 }
  },
  computed: {
    pageNum() {
      return Math.ceil(this.allNumber / this.pageSize);
    },
    pagesList() {
      let left = 1;
      let right = this.pageNum;
      let ar = []; //页码的尺寸为10
      if (this.pageNum >= 11) {
        if (this.cur > 5 && this.cur < this.pageNum - 4) {
          left = this.cur - 5;
          right = this.cur + 4;
        } else {
          if (this.cur <= 5) {
            left = 1;
            right = 10;
          } else {
            right = this.pageNum;
            left = this.pageNum - 9;
          }
        }
      }
      while (left <= right) {
        ar.push(left);
        left++;
      }

      if (ar[0] > 1) {
        ar[0] = 1;
        ar[1] = 0;
      }
      if (ar[ar.length - 1] < this.pageNum) {
        ar[ar.length - 1] = this.pageNum;
        ar[ar.length - 2] = 0;
      }
      return ar;
    }
  },
  methods: {
    //页面点击
    pageClick(page) {
      if (page < 1) {
        return;
      }
      if (this.cur != page) {
        this.$emit("change", page);
      }
    },
    nextPage() {
      if (this.cur >= this.pageNum) {
        return;
      }
      this.$emit("change", this.cur + 1);
    },
    prevPage() {
      if (this.cur <= 1) {
        return;
      }
      this.$emit("change", this.cur - 1);
    },
    setButtonClass(key) {
      if (key) {
        return this.cur >= this.pageNum ? "page-button-disabled" : "";
      } else {
        return this.cur <= 1 ? "page-button-disabled" : "";
      }
    },
    setPageClass(page) {
      if (page < 1) {
        return "unitem";
      } else {
        if (this.cur === page) {
          return "item active";
        } else {
          return "item";
        }
      }
    }
  }
};
</script>


<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';

.page-bar {
    ul {
        li {
            float: left;
            box-sizing: border-box;
            padding: 3px 7px;
            margin-right: 4px;
            font-size: 15px;
            border-radius: 5px;
            cursor: pointer;
        }

        li.item {
            color: $color-theme;
            border: 1px solid $color-theme;

            &:hover {
                color: #fff;
                background: #4cd597;
            }

            &.active {
                color: #fff;
                background: $color-theme;
            }

            &.page-button-disabled {
                color: #fff;
                border-color $color-text-l
                background $color-text-l
            }
        }

        li.unitem {
            border-color: transparent;
            color: #999;
            font-weight: bolder;
        }
    }
}
</style>
